<script setup>
import {computed, ref} from "vue";
import {useStore} from "../store/store.js";

const open = ref(false)
const store = useStore()
const parentTab = ref('')
const group = computed(() => store.group)
const nowGroup = ref('')
const nowPrize = ref('')
const prize = computed(() => store.prize)

const openInit = () => {
  nowGroup.value = store.nowGroup
  open.value = true
}

const nowGroupChange = (e) => {
  store.nowGroup = e.target.value
}
const nowPrizeChange = (e) => {
  store.nowPrize = e.target.value
}
const resetAll = () => {
  store.init()
}
</script>

<template>
  <a-button @click="openInit">设置</a-button>
  <a-modal v-model:open="open" title="抽奖设置" @ok="open = false">
    <a-tabs v-model:active-key="parentTab">
      <a-tab-pane tab="分组设置" key="groupSetting">
        <a-tabs>
          <a-tab-pane v-for="item in group" :tab="item.groupName" :key="item.groupName">
            <div>分组成员：</div>
            <span v-for="it in item.members" style="margin-right: 10px;">{{ it }}</span>
          </a-tab-pane>
        </a-tabs>
      </a-tab-pane>
      <a-tab-pane tab="现在抽奖" key="nowGroup">
        <a-radio-group v-model:value="nowGroup" @change="nowGroupChange">
          <a-radio-button v-for="item in group" :value="item.groupName">{{ item.groupName }}</a-radio-button>
        </a-radio-group>
        <a-radio-group v-model:value="nowPrize" @change="nowPrizeChange">
          <a-radio-button v-for="item in prize" :value="item">{{ item }}</a-radio-button>
        </a-radio-group>
      </a-tab-pane>
    </a-tabs>
    <a-button type="primary" @click="resetAll">重置所有</a-button>
  </a-modal>
</template>

<style scoped>

</style>
